<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>动态组件</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="root">
    <!-- 动态组件component： 根据is内容的不同进行切换展示 -->
    <!-- <component :is="show"></component> -->
    <child-one v-if="show === 'child-one'"></child-one>
    <child-two v-if="show === 'child-two'"></child-two>
    <button @click="handleClick">点击切换</button>
  </div>
  
  <script>
    // 创建两个组件，点击按钮，切换两个组件展示隐藏
    // v-once 提高组件性能（提高静态网页展示效率），写在子组件里面
    // 将组件缓存，每次刷新的时候，不需要重新创建组件，直接从缓存提取
    Vue.component('child-one', {
      template: 
          `<div v-once>
            child-one
          </div>`
    })
    Vue.component('child-two', {
      template: 
          `<div v-once>
            child-two
          </div>`
    })
    var vm = new Vue({
      el: '#root',
      data: {
        show: 'child-one'
      },
      methods: {
        handleClick: function() {
          this.show = this.show === "child-one" ? "child-two" : "child-one"
        }
      }
    })
  </script>
</body>
</html>